<template>
  <div class="app">
    <h3 class="cll_h3"> 订单管理</h3>
  </div>
  <div>
    <hr />
    <el-form :model="form" label-width="120px" :inline='true'>
      <el-form-item>
        <el-select v-model="form.region" placeholder="工作餐">
          <el-option label="男士餐" value="男士餐" />
          <el-option label="女士餐" value="女士餐" />
          <el-option label="工作餐" value="工作餐" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="form.date1" type="datetime" placeholder="开始时间" />
        <span>至</span>
        <el-date-picker v-model="form.date2" type="datetime" placeholder="结束时间" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.name" placeholder="姓名/电话" />
      </el-form-item>
      <el-form-item width="100">
        <div class="btn">
          <el-button type="primary" @click="filter" color="#999">筛选</el-button>
          <el-button type="primary" @click="leadout" color="#999" class="right">导出</el-button>
        </div>
      </el-form-item>
    </el-form>
    <hr />
  </div>

  <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" align="center" />

    <el-table-column property="order" label="订单号" width="160" />
    <el-table-column property="deliveryp" label="配送产品" width="120" />
    <el-table-column property="money" label="订单金额" show-overflow-tooltip />
    <el-table-column property="address" label="收货地址" show-overflow-tooltip />
    <el-table-column property="paystatus" label="付款状态" show-overflow-tooltip />
    <el-table-column property="orderstatus" label="订单状态" show-overflow-tooltip />
    <el-table-column property="receiver" label="收货人" show-overflow-tooltip />
    <el-table-column property="phone" label="收货人手机" show-overflow-tooltip />
    <el-table-column property="time" label="下单时间" show-overflow-tooltip />
    <el-table-column label="操作" inline="true">
     <template #default="scope">
      <el-link type="info" class="link" @click="handleFind(scope.row)">查看</el-link>
     </template>
    </el-table-column>
  </el-table>
  <!-- 分页器 -->
  <el-pagination 
  background 
  layout="prev, pager, next" 
  :total="total" 
  :default-page-size="pageSize" 
  @current-change="handlePageChange" 
  class="paging"
  />
</template>
<script  lang="ts">
import { order } from '@/api/order'
import dayJS from 'dayjs'
import { defineComponent } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { utils, writeFileXLSX } from 'xlsx'
export default defineComponent({
  name: '',
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        page:1,
      },
      value1: '',
      str: 'YYYY-MM-DD',
      tableData: [
        // {
        //   order: '2017060500123',
        //   deliveryp: '男士餐',
        //   money: 600,
        //   address: '地址',
        //   paystatus: '已付款',
        //   orderstatus: '进行中',
        //   receiver:'吉子',
        //   phone: '12345678945',
        //   time: '2017-06-05  12:30'

        // },

      ],
      total:1,
      pageSize: 5,
      exportlist:[],
    }
  },
  methods: {
    //筛选
    async filter() {
console.log(this.form.date1)
      let data1=new Date(this.form.date1)
      let time1=data1.getTime()
      let data2=new Date(this.form.date2)
      let time2=data2.getTime()
      // 日期时间格式化
      // const date1 = dayJS(this.form.date1).format(this.str)
      // const date2 = dayJS(this.form.date2).format(this.str)
      // @ts-ignore
      this.form.date1 = time1
      // @ts-ignore
      this.form.date2 = time2
      
      const data = this.form
      data.page=1
      const res = await order(data)
      console.log(res)
       // @ts-ignore
       this.tableData=res.list
        // @ts-ignore
        this.total = res.total
        // @ts-ignore
        this.pageSize = res.pageSize
    

    },
    async leadout() {
      ElMessageBox.confirm(
        '是否确认导出订单列表',
        '下载确认',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'success',
        }
      )
        .then(() => {
          this.export()
          ElMessage({
            type: 'success',
            message: '导出成功',
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消导出',
          })
        })
    },
    // 导出函数
    export(){
      const list:any[] = this.exportlist
      list.unshift({
          order: '订单号',
          deliveryp: '配送产品',
          money: '订单金额',
          address: '收货地址',
          paystatus: '付款状态',
          orderstatus: '订单状态',
          receiver:'收货人',
          phone: '收货人手机',
          time: '下单时间'
      },
       ...this.tableData
      )
      // 简历工作表  数组转工作表格式
      const ws = utils.json_to_sheet(list)
      // 创建工作簿
      const wb = utils.book_new()
      // 工作表插入工作簿
      utils.book_append_sheet(wb, ws, '订单列表')
      writeFileXLSX(wb, `订单列表-${new Date().toISOString()}.xlsx`)

    },
    handleSelectionChange() {
      console.log(12)
    },
    handleFind(item:any) {
      console.log('查看')
      this.$router.push({
        path:'/order/orderfood',
        query:item
      })
    },
    //分页
    //@ts-ignore
    async handlePageChange(page:any) {
      const data = this.form
      data.page=page
     const result=await order(data)
            // @ts-ignore
          
     this.tableData=result.list
    //  console.log(result)
        // @ts-ignore
        this.total = result.total
        // @ts-ignore
        this.pageSize = result.pageSize

    },
  },
 created() {
  this.handlePageChange(1)
  },


})
</script>

<style scoped lang="less">
.link {
  margin: 0 5px;
}

:deep(.el-button) {
  color: #fff;
  border-radius: 0%
}

.btn {
  width: 100%;
}

span {
  margin: 0 20px;
}
.paging{
  margin-top:10px ;
  margin-left: 450px;
}
</style>
